<!--
 * @Date: 2023-04-13 16:36:41
 * @LastEditTime: 2023-10-12 11:23:17
 * 介绍:任务详情
-->
<route lang="json">
{
  "meta": {
    "title": "t('ren-wu-xiang-qing')",
    "navbar": {
      "buttons": [
        {
          "icon": "icon-xialacaidan",
          "pubSubKey": "__wkMenu__"
        }
      ]
    }
  }
}
</route>
<script lang="ts" setup>
import taskInfo from "./components/taskInfo.vue";
import { ApiWkTaskList, ApiBanTaskDelList, ApiWkMyOrderTaskList } from "@@/api/wk/list";
import { _require } from "@@/utils/tools";
import {
  apiRevokeTask,
  apiTaskDetails,
  ApiTaskDetails,
  apiDelTask,
} from "@@/api/wk/index";
import { showDialog } from "vant";
import applyDelTask from "./components/applyDelTask.vue";
import comment from "./components/comment.vue";
import banTaskDelVote from "./components/banTaskDelVote.vue";
import orderTaskVue from "./components/orderTask.vue";
import router from "@@/router";
import useUserinfoStore from "@@/store/useUserinfoStore";
import arbitrate from "./components/arbitrate.vue";
import { WkTaskStatus, wkTaskStatus } from "@@/enum/globalEnum";
import { useCurrentDate } from "@@/hooks/toolsHooks";
import dayjs from "dayjs";
import applyComplete from "./components/applyComplete.vue";
import completeTest from "./components/completeTest.vue";
import { navbarConfig } from "@@/layout/navbar";
import { navbar } from "@@/enum/pubsub";
import { useSubscribe } from "@@/hooks/toolsHooks";
import { useCpageViewRef } from "@@/components/common/CpageView";
import TaskProcess from "./components/taskProcess.vue";
import { ApiTaskArbitrateList } from "@@/api/wk/list";
import addTaskFailed from "./components/addTaskFailed.vue";

const route = useRoute();
const query: AnyObject = route.query;
const data: RequiredBy<Partial<ApiWkTaskList.DataItem>, "id"> = JSON.parse(
  query.json
);
const watchword: string = query.watchword;
const taskDetails = ref<ApiTaskDetails.Data>();
let banTaskDel: undefined | Omit<ApiBanTaskDelList.DataItem, "task">;
let orderTask: undefined | Omit<ApiWkMyOrderTaskList.DataItem, "task">;
if (query.banTaskDel) banTaskDel = JSON.parse(query.banTaskDel);
if (query.orderTask) orderTask = JSON.parse(query.orderTask);
let arbitration: undefined | Omit<ApiTaskArbitrateList.DataItem, "task">;
if (query.arbitration) arbitration = JSON.parse(query.arbitration);

const { currentDate, open } = useCurrentDate(1000, { setupOpen: false });
if (orderTask) open();

/**接单成功后开启倒计时 */
function orderTaskSuccess() {
  const date = dayjs().format("YYYY-MM-DD HH:mm:ss");
  orderTask = {
    created_at: date,
    updated_at: date,
    id: 0,
    user_id: userinfoStore.userinfo?.id!,
    task_id: data.id,
    reputation: "??%",
    order_limit_time: taskDetails.value?.order_limit_time!,
    user: taskDetails.value?.user!,
  };
  open();
}

const { subscribe } = useSubscribe();
subscribe(navbar.wkDelTask, () => {
  showDialog({
    title: t("shan-chu-reng-wu"),
    message: t("yao-shan-chu-reng-wu-mang"),
  })
    .then(() => apiDelTask({ id: data.id }))
    .then((res) => {
      if (res) router.back();
    });
});

const { t } = useI18n();

function revoke() {
  showDialog({
    title: t("qing-que-ren"),
    message: t("yao-che-xiao-reng-wu-ma"),
  })
    .then(() => apiRevokeTask({ id: data.id }))
    .then((res) => {
      if (res) router.back();
    });
}
const userinfoStore = useUserinfoStore();

/**我是发布者 */
const isMyTask = computed(
  () =>
    !!userinfoStore.userinfo?.id &&
    userinfoStore.userinfo.id == (data.user_id || taskDetails.value?.user_id)
);
/**我是接单者 */
const isMyOrderTask = computed(
  () =>
    !!userinfoStore.userinfo?.id &&
    (orderTask?.user_id || taskDetails.value?.task_order?.user_id) ==
      userinfoStore.userinfo?.id
);
/**我是其他人 */
const isOthers = computed(
  () => !!userinfoStore.userinfo?.id && !isMyTask.value && !isMyOrderTask.value
);
const canComment = computed(
  () =>
    !!taskDetails.value &&
    [
      WkTaskStatus.ORDER_ACCEPT,
      WkTaskStatus.ARBITRATION,
      WkTaskStatus.NOT_COMPLETE,
      WkTaskStatus.PENDING_AUDIT,
    ].includes(taskDetails.value.status)
);
const showApplyDelTask = computed(
  () =>
    !isMyTask.value &&
    taskDetails.value &&
    [WkTaskStatus.ORDER_PENDING].includes(taskDetails.value.status)
);
const CpageViewRef = useCpageViewRef();
async function refresh() {
  CpageViewRef.value?.pullRefreshStart();
  const res = await apiTaskDetails({ id: data.id }, { watchword });
  if (!res) {
    CpageViewRef.value?.pullRefreshFail();
    router.back();
    return;
  }
  CpageViewRef.value?.pullRefreshSuccess();
  taskDetails.value = res;
  if (
    [WkTaskStatus.ORDER_PENDING, WkTaskStatus.REVOKED].includes(
      taskDetails.value.status
    ) &&
    isMyTask.value
  ) {
    navbarConfig.buttons ??= [];
    for (const val of navbarConfig.buttons) {
      if (val.pubSubKey === navbar.wkDelTask) return;
    }
    navbarConfig.buttons.unshift({
      icon: "icon-shanchu",
      pubSubKey: navbar.wkDelTask,
      //@ts-ignore
      style: {
        color: "var(--C-fail)",
      },
    });
  }
}
onMounted(refresh);
</script>
<template>
  <CpageView pull-refresh @refresh="refresh" ref="CpageViewRef">
    <div class="auto-MT-md PB-xxl">
      <!-- 任务信息 -->
      <taskInfo
        :details="taskDetails"
        :task="data"
        :current-date="currentDate"
        :order-task="orderTask"
      />
      <addTaskFailed
        v-if="taskDetails && taskDetails.status === WkTaskStatus.FAIL"
        :details="taskDetails"
      />
      <!-- 接单支付,或接单失败继续支付 -->
      <orderTaskVue
        v-if="
          !isMyTask &&
          taskDetails?.status &&
          (taskDetails.status === WkTaskStatus.ORDER_PENDING ||
            taskDetails.task_order.status === WkTaskStatus.FAIL)
        "
        class="MT-xl"
        :details="taskDetails"
        @order-task-success="orderTaskSuccess"
      />
      <!-- 留言板 -->
      <comment :canComment="canComment" class="MT-xl" :id="data.id" />
      <!-- 任务完成退回过程 -->
      <TaskProcess :task_progress="taskDetails?.task_progress" />
      <!-- 威客仲裁说明 -->
      <arbitrate
        :arbitration="arbitration"
        :is-my-task="isMyTask"
        :task_id="data.id"
        v-if="taskDetails"
        :refresh="refresh"
        :is-others="isOthers"
        :isMyOrderTask="isMyOrderTask"
        :details="taskDetails"
      />
      <!-- 申请完成 -->
      <applyComplete
        v-if="
          isMyOrderTask && taskDetails?.status === WkTaskStatus.ORDER_ACCEPT
        "
        :details="taskDetails"
        :refresh="refresh"
      />
      <!-- 申请完成处理 -->
      <completeTest
        v-if="isMyTask && taskDetails?.status === WkTaskStatus.PENDING_AUDIT"
        :details="taskDetails"
        :refresh="refresh"
      />
      <!-- 申请删除任务 -->
      <applyDelTask
        v-if="taskDetails && showApplyDelTask"
        class="MT-xl"
        :details="taskDetails"
      />
      <!-- 删除任务投票 -->
      <banTaskDelVote
        class="MT-xl"
        v-if="banTaskDel"
        :ban-task-del="banTaskDel"
      />
      <div class="MT-xl">
        <Rbutton
          v-if="isMyTask && taskDetails?.status === WkTaskStatus.ORDER_PENDING"
          @click="revoke"
          bg="var(--C-M1-O1)"
          class="C-T1"
          :size="'large'"
        >
          {{ $t("che-xiao-reng-wu") }}
        </Rbutton>
      </div>
    </div>
  </CpageView>
</template>
<style lang="scss" scoped></style>
